import { View } from '@tarojs/components'
import { AtTabs, AtTabsPane, AtList } from "taro-ui"
import { BasePage } from '@common/components/base-page'
import List from '@components/list'
import Jump from '@utils/jump'
import Taro from '@tarojs/taro'
import AppRoute from '@utils/route/index'
import NavigationBar from '@components/navBar'
import Banner from '@components/swiper'
import PanelMeida from '@components/panel-media'
import Tabs from '@components/tabs'
import IQRequest from '@common/iq-request/request'
import { setGlobalData } from '@utils/tools'
import selectImg from '../../assets/img/select (1).png'
import exImg from '../../assets/img/phone.jpg'
// import './index.scss'

import style from './index.module.scss'

interface IProps {
}
interface IState {
  imageListIndex: number;
  tabList: any;
  tabIndex: number;
  scrollNumber: number;
  hotList: any;
  current: number;
  sort: number;
  selector: any
  selected: any
  userInfo: any
  bannerList: any
  clickedSelectPanel: boolean
  avatarImage: string
  clickedCategory: string
  tabData: any
  taskList: any
}

export default class Index extends BasePage<IProps, IState> {
  constructor(props) {
    super(props);
    this.state = {
      clickedSelectPanel: false,
      avatarImage: '',
      tabList: [
        { index: 0, title: '全部' },
        { index: 1, title: '新品体验' },
        { index: 2, title: '日常种草' },
        { index: 3, title: '限定活动' },
      ],
      imageListIndex: 0,
      bannerList: [],
      selected: '',
      clickedCategory: '',
      tabIndex: 3,
      scrollNumber: 0,
      hotList: [],
      taskList: [],
      current: 0,
      tabData: {},
      sort: 4,
      userInfo: {},
      selector: ['抖音', '快手', '哔哩哔哩', '微博', '视频号', '小红书']
    }

  }
  componentDidShow = async () => {
    setGlobalData({
      tabIndex: 0
    })
    this.setState({
      userInfo: Taro.getStorageSync('userInfo') || {}
    })
    this.getTask()
  }

  getTask = async () => {
    await IQRequest.VIVORequest('v1/users/index/banner', {}, { method: 'POST' }).then((response: any) => {
      console.log(response)
      let filteredData = response.data.filter(item => item.isShow == 1);
      this.setState({
        bannerList: filteredData
      })
    }
    )
  }
  onSearchTap = () => {
    // 跳转到搜索页面
    Jump.jump({
      url: AppRoute.MODULES.SEARCH,
    })
  }
  handleClick(e) {
    this.setState({
      current: e
    })
    console.log(e, '点击了tab页')
  }
  onChange(e) {
    console.log(e, 'lll')
    let selectedValue = this.state.selector[e.detail.value] || null
    this.setState({
      selected: selectedValue
    })

  }
  handleSelect(e) {
  }
  handle = () => {
    console.log('选择平台')
    this.setState({
      clickedSelectPanel: true
    })
  }
  getCategory = (e) => {
    this.setState({
      clickedCategory: this.state.tabData.categories[0].id || e.id,
      clickedSelectPanel: false
    })
    this.getTask()

  }
  closeMediaChange = (plat) => {
    console.log(plat, '选择的平台')
    this.setState({
    })
    this.getTask()
  }
  render() {
    let { scrollNumber, userInfo } = this.state
    console.log('进入了页面渲染')
    return (
      <>
        <NavigationBar placeholder='请输入关键字' avatar={userInfo.cover} inShowHeight={true} isDisabled={true} backPageShow={false} titleColor="white" barBackgroundColor='' title="" homeTitleSearchShow={true} onPageScrollStatus={scrollNumber} onSearchClickFunction={this.onSearchTap}></NavigationBar>
        <View className={style.pageBackground}></View>
        <View>
          <View>
            <Banner bannerList={this.state.bannerList} />
          </View>
          <Tabs getCategory={this.getCategory} tabData={this.state.tabData} handleMediaSelect={this.handle}></Tabs>
          <List taskList={this.state.taskList} progress={false} />
        </View>
      </>
    )
  }
}
